<template>
	<view>
		<u-toast ref="uToast" />
		<view class="mh32 baseArea">
			<u-toast ref="uToast" />
			<view class="mainRow mt10  mt30">
				<!-- 头部 -->
				<view style="display: flex;width: 100%;justify-content : space-between;">
					<view style="height: 88rpx;display: flex;">
						<view>
							<u--image width="100rpx" height="100rpx"  style="margin-right: 20rpx;" :src="dataList.avatar"></u--image>
						</view>
						<view style="margin-left: 10rpx;">
							<text class="uname ">{{ dataList.username }}</text>
							<view style="margin-top: 8rpx;color: #6F6D6D;">
								<text>{{ dataList.time }}</text>
								<text style="margin-left: 20rpx;">{{ dataList.browse_count }}次浏览</text>
							</view>
						</view>
					</view>
					<view style="display: flex" class="mr36" v-show="dataList.is_me==1?false:true">
						<view @click="follow(dataList.user_id)" v-if="dataList.is_follow == 0 ? true : false"
							class="guanzhubtn guanzhu fcenter">关注</view>
						<view @click="obsolescence(dataList.user_id)" v-else class="guanzhubtn yiguanzhu fcenter">已关注
						</view>
					</view>
				</view>
			</view>
			<view class="adongtai_wzbox">
				<text class="text28 "
					style="color:#4E4E58 ;line-height: 32rpx;display: inline-block;text-align: justify;">{{ dataList.content }}</text>
		
				<view class="adongtai_picbox" v-for="(item, index) in dataList.imgs">
					<view>
						<image @click="clickImg(item)" class="circular" :src="item" mode=""></image>
					</view>
				</view>
				<view v-if="dataList.talk" class="pinglun mt10" style="color: #6F6D6D ;"><text
						class="fangbtn">{{dataList.talk}}</text></view>
				<view v-else></view>
			</view>
			<view style="display: flex;justify-content : space-between;align-items : center;">
				<view>
					<text class="shutiao" style="vertical-align:text-top;"></text>
					<text class="car ml18">评论</text>
					<text class="car">({{ dataList.comment_list ? dataList.comment_list.length : 0 }})</text>
				</view>
			</view>
			<view style="border-bottom: 1rpx solid #EFEFEF ; padding-bottom: 20rpx;" class="mt32"
				v-for="(item, index) in dataList.comment_list">
				<view style="display: flex;justify-content : space-between;align-items : center;">
					<view style="display: flex;align-items : center;">
						<u-avatar :src="item.avatar" :size="40"></u-avatar>
						<text class="ml32 text32" style="font-weight: bold;">{{ item.username }}</text>
					</view>
					<view>
						<text style="font-size: 32rpx;color: #6F6D6D;" class="mr18"> {{item.support_count}} </text>
						<u-icon name="thumb-up" color="#6F6D6D" :size="32" @tap="btnBClick(0, item.id , index )"></u-icon>
					</view>
				</view>
				<view>
					<view style="margin-left: 115rpx;">
						<view class="pinlun">{{ item.content }}</view>
						<view class="time mt12">{{ item.time }}</view>
					</view>
				</view>
			</view>
		</view>
		<view style="position: fixed;bottom: 0rpx;width: 100%;background-color: #fff;">
			<view class="bibtn " style="display: flex;justify-content : space-around; align-items : center;">
				<u-icon name="arrow-left" size="40rpx" style="margin-left: 24rpx;"></u-icon>
				<input confirm-type="send" @confirm="doSearch" class="search " v-model="comment" placeholder="我来说说两句" />
				<!-- <input c type="text" v-model="comment"  /> -->
				<view>
					<ul style="list-style:none;display: flex;width: 216rpx;">
						<li @click="doSearch">
							<u-icon name="chat" class="fcenter" size="40rpx"></u-icon>
							<text style="display: block;font-size: 20rpx;">评论</text>
						</li>
		
						<li style="width: 40rpx;margin-left: 28rpx;margin-right: 28rpx;" @tap="open()">
							<u-icon name="share" size="40rpx"></u-icon>
							<text style="display: block;font-size: 20rpx;width:50rpx;">分享</text>
						</li>
		
						<li style="width: 40rpx;" @tap="btnBClick(1,id)">
							<u-icon name="thumb-up" size="40rpx"></u-icon>
							<text style="display: block;font-size: 20rpx;width:50rpx;">点赞</text>
						</li>
					</ul>
				</view>
			</view>
			<!-- -->
		</view>
	</view>
</template>

<script>
import { circleDetail  , comment  , support , circleSupport } from '@/api/me.js'
import { mixin } from "../../mixins/mixin.js"
export default{
	mixins:[mixin],
	data () {
		return {
			id:0,
			comment:'',
			dataList:{}
		}
	},
	onLoad( options ){
		this.id = options.id;
		this.getData();
	},
	methods:{
		getData(){
			circleDetail({
				id:this.id
			}).then(res=>{
				this.dataList = res.data;
			})
		},
		//评论
		doSearch(){
			comment({
				id:this.id,
				content:this.comment
			}).then(res=>{
				this.getData();
			})
		},
		//小点赞
		likeDetails(){
			this.load( this.dataList.comment_list , this.index , 'support_count' );
			//更新接口数据
			support({
				id:this.id
			})
		},
		//大点赞
		circlePraisClick(){
			this.load();
			//更新接口数据
			circleSupport({
				id:this.id
			})
		},
		//点赞
		btnBClick( type , id  , index ){
			this.index = index;
			this.id = id;
			//小点赞
			if( type == 0 ){
				uni.$u.debounce(this.likeDetails, 500);
			}else{//大点赞
				this.$u.debounce(this.circlePraisClick, 500);
			}
		}
	}
}
</script>

